@extends('layout.admin')

@section('title', '菜单管理')

@section('content')
    <style>
        .list-content{
            background-color: #fff;
            max-width: 100%;
            flex: 0 0 100%;
            padding: 0 10px;
        }

        .list-content .tree-content{
            min-width: 600px;
            margin: 0 auto;
            padding: 50px 0px 20px 150px;
            flex: 0 0 auto;
        }

        .list-content .tree-content .tree-row{
            height: 30px;
            line-height: 30px;
        }

        .list-content .tree-content .tree-first:not(:first-child){
            margin-top: 20px;
        }
        .list-content .tree-content .tree-children .tree-second:not(:first-child){
            margin-top: 10px;
        }

    </style>
    <div class="list-content">
        {{--头部--}}
        @include('shared.adminListHeader',[
        'listName'=>'菜单列表',
        'svgIconName' => 'justify',
        'listAddUrl' => url('admin/role/menuEdit'),
        ])
        {{--不是列表的头部--}}
        @include('shared.adminTreeHeader')

        @if(empty($menuTree))
        <div class="text-secondary"
             style="padding-top: 50px; line-height: 50px;height: 50px;font-size: 26px;text-align: center;">
            暂无数据
        </div>
        @else
        <div class="tree-content">
            @foreach($menuTree as $firstId=>$firstVal)
                <div class="tree-first">
                    <div class="tree-row">
                        <span class="tree-name">{{$firstVal['name']}}</span>
                        <span class="text-secondary">序号:{{$firstVal['row_num']}}</span>
                        <span class="text-secondary">@if(isset($firstVal['is_show']['value']) && 1 == $firstVal['is_show']['value']) 显示于菜单 @else 不显示菜单 @endif </span>
                        <a href="{{url('admin/role/menuEdit', ['id'=>$firstId])}}">编辑</a>
                        @if(empty($firstVal['children']))
                        <a class="menu-delete" data-id="{{$firstId}}" href="#" >删除</a>
                        @endif
                    </div>
                    @if(!empty($firstVal['children']))
                        <div class="tree-children">
                        @foreach($firstVal['children'] as $secondId=>$secondVal)
                            <div class="tree-second">
                                <div class="tree-row">
                                    <span class="tree-name">|--- {{$secondVal['name']}}</span>
                                    <span class="text-secondary">序号:{{$secondVal['row_num']}}</span>
                                    <span class="text-secondary">@if(isset($secondVal['is_show']['value']) && 1 == $secondVal['is_show']['value']) 显示于菜单 @else 不显示菜单 @endif </span>
                                    <a href="{{url('admin/role/menuEdit', ['id'=>$secondId])}}">编辑</a>
                                    @if(empty($secondVal['children']))
                                        <a class="menu-delete" data-id="{{$secondId}}" href="#">删除</a>
                                    @endif
                                </div>
                                @if(!empty($secondVal['children']))
                                    <div class="tree-children">
                                        @foreach($secondVal['children'] as $thirdId=>$thirdVal)
                                            <div class="tree-row tree-third">
                                                <span class="tree-name">|---|--- {{$thirdVal['name']}}</span>
                                                <span class="text-secondary">序号:{{$thirdVal['row_num']}}</span>
                                                <span class="text-secondary">@if(isset($thirdVal['is_show']['value']) && 1 == $thirdVal['is_show']['value']) 显示于菜单 @else 不显示菜单 @endif </span>
                                                <a href="{{url('admin/role/menuEdit', ['id' => $thirdId])}}">编辑</a>
                                                <a class="menu-delete" data-id="{{ $thirdId}}" href="#">删除</a>
                                            </div>
                                        @endforeach
                                    </div>
                                @endif
                            </div>

                        @endforeach
                        </div>
                    @endif
                </div>
            @endforeach
        </div>

{{--            <div class="tree-first">--}}
{{--                <div class="tree-row">--}}
{{--                    <span class="tree-name">菜单</span>--}}
{{--                    <a href="#">编辑</a>--}}
{{--                    <a href="#">删除</a>--}}
{{--                </div>--}}
{{--                <div class="tree-children">--}}
{{--                    <div class="tree-second">--}}
{{--                        <div class="tree-row">--}}
{{--                            <span class="tree-name">|--- 子菜单二级1</span>--}}
{{--                            <a href="#">编辑</a>--}}
{{--                            <a href="#">删除</a>--}}
{{--                        </div>--}}
{{--                        <div class="tree-children">--}}
{{--                            <div class="tree-row tree-third">--}}
{{--                                <span class="tree-name">|---|--- 子菜单三级1-1</span>--}}
{{--                                <a href="#">编辑</a>--}}
{{--                                <a href="#">删除</a>--}}
{{--                            </div>--}}
{{--                            <div class="tree-row tree-third">--}}
{{--                                <span class="tree-name">|---|--- 子菜单三级1-2</span>--}}
{{--                                <a href="#">编辑</a>--}}
{{--                                <a href="#">删除</a>--}}
{{--                            </div>--}}
{{--                            <div class="tree-row tree-third">--}}
{{--                                <span class="tree-name">|---|--- 子菜单三级1-3</span>--}}
{{--                                <a href="#">编辑</a>--}}
{{--                                <a href="#">删除</a>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                    <div class="tree-second">--}}
{{--                        <div class="tree-row">--}}
{{--                            <span class="tree-name">|--- 子菜单二级2</span>--}}
{{--                            <a href="#">编辑</a>--}}
{{--                            <a href="#">删除</a>--}}
{{--                        </div>--}}
{{--                        <div class="tree-children">--}}
{{--                            <div class="tree-row tree-third">--}}
{{--                                <span class="tree-name">|---|--- 子菜单三级2-1</span>--}}
{{--                                <a href="#">编辑</a>--}}
{{--                                <a href="#">删除</a>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--            <div class="tree-first">--}}
{{--                <div class="tree-row">--}}
{{--                    <span class="tree-name">菜单</span>--}}
{{--                    <a href="#">编辑</a>--}}
{{--                    <a href="#">删除</a>--}}
{{--                </div>--}}
{{--                <div class="tree-children">--}}
{{--                    <div class="tree-second">--}}
{{--                        <div class="tree-row">--}}
{{--                            <span class="tree-name">|--- 子菜单二级1</span>--}}
{{--                            <a href="#">编辑</a>--}}
{{--                            <a href="#">删除</a>--}}
{{--                        </div>--}}
{{--                        <div class="tree-children">--}}
{{--                            <div class="tree-row tree-third">--}}
{{--                                <span class="tree-name">|---|--- 子菜单三级1-1</span>--}}
{{--                                <a href="#">编辑</a>--}}
{{--                                <a href="#">删除</a>--}}
{{--                            </div>--}}
{{--                            <div class="tree-row tree-third">--}}
{{--                                <span class="tree-name">|---|--- 子菜单三级1-2</span>--}}
{{--                                <a href="#">编辑</a>--}}
{{--                                <a href="#">删除</a>--}}
{{--                            </div>--}}
{{--                            <div class="tree-row tree-third">--}}
{{--                                <span class="tree-name">|---|--- 子菜单三级1-3</span>--}}
{{--                                <a href="#">编辑</a>--}}
{{--                                <a href="#">删除</a>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                    <div class="tree-second">--}}
{{--                        <div class="tree-row">--}}
{{--                            <span class="tree-name">|--- 子菜单二级2</span>--}}
{{--                            <a href="#">编辑</a>--}}
{{--                            <a href="#">删除</a>--}}
{{--                        </div>--}}
{{--                        <div class="tree-children">--}}
{{--                            <div class="tree-row tree-third">--}}
{{--                                <span class="tree-name">|---|--- 子菜单三级2-1</span>--}}
{{--                                <a href="#">编辑</a>--}}
{{--                                <a href="#">删除</a>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}
        @endif
    </div>
    <meta name="csrf-token" content="{{csrf_token()}}">
    <script>
        $(document).ready(function(){
            $('.menu-delete').on('click', function(){
                let _this = $(this);
                layer.alert('删除后不能恢复，确定继续操作吗？',
                    {
                        title: '删除提示',
                        time: 0, //不自动关闭
                        btn: ['确定', '取消'],
                        yes: function(index){
                            console.log(_this.attr('data-id'));
                            $.ajax({
                                url: "{{url('admin/role/menuDelete')}}",
                                data: {id:_this.attr('data-id')},
                                dataType: 'json',
                                type: 'POST',
                                headers:{
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                },
                                success: function(e){
                                    console.log(e)
                                    if(e.code == 20000){
                                        layer.msg('操作成功');
                                        setTimeout(function(){
                                            window.location.reload();
                                        }, 2000);
                                    } else {
                                        layer.msg(e.msg);
                                    }
                                },
                                error: function(e){
                                    let errorMessage = e.responseText;
                                    errorMessage = errorMessage ? JSON.parse(errorMessage) : [];
                                    errorMessage = errorMessage.message ? errorMessage.message : '系统暂时关闭';
                                    layer.msg(errorMessage);
                                }
                            });
                        }
                    })
            })
        });
    </script>
@endsection
